<template>
  <!-- 联合巡检:首页 -->
  <div class="joint-spection-box">
    <!-- 1. 3D地图 -->
    <div class="threed-map-box">
      <div class="threed-map-box-map">
        <jointInspectionmap />
      </div>
      <!-- 1.1  3D地图的图例 -->
      <div class="threed-map-legend colbetweenbox">
        <div class="item">
          <span></span>
          <span>未巡检</span>
        </div>
        <div class="item">
          <span></span>
          <span>巡检中</span>
        </div>
        <div class="item">
          <span></span>
          <span>巡检完成</span>
        </div>
        <div class="item">
          <span></span>
          <span>巡检失败</span>
        </div>
      </div>
    </div>
    <!-- 2. 变电站覆盖情况 -->
    <div class="bdzfgqk-btn">
      <el-button class="el-icon-arrow-down" circle @click="()=>{bdzfgqkStatus=!bdzfgqkStatus}"></el-button>
    </div>
    <div class="bdzfgqk-box" v-show="bdzfgqkStatus">
      <SubstationCover />
    </div>
    <!-- 3. 异常统计、未处理报告等 -->
    <div class="yctjwclbg-box" v-show="yctjwclbgStatus">
      <AbnormalStatistics />
    </div>
    <div class="yctjwclbg-btn">
      <el-button class="el-icon-arrow-up" circle @click="()=>{yctjwclbgStatus=!yctjwclbgStatus}"></el-button>
    </div>
    <!-- 4. 变电站、巡检计划、巡检报告 -->
    <div class="bdz-xjjh-xjbg">
      <div class="borderStyle">
        <Substation />
      </div>
      <div class="borderStyle">
        <Plan />
      </div>
      <div class="borderStyle">
        <Report />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Substation from "./Substation.vue";
import Plan from "./Plan.vue";
import Report from "./Report.vue";
import SubstationCover from "./SubstationCover.vue";
import AbnormalStatistics from "./AbnormalStatistics.vue";
import { jointInspectionmap } from "@/components";
@Component({
  components: {
    Substation,
    Plan,
    Report,
    SubstationCover,
    AbnormalStatistics,
    jointInspectionmap,
  },
})
export default class extends Vue {
  public titleName: string = "变电站";
  bdzfgqkStatus = true;
  yctjwclbgStatus = true;
}
</script>

<style lang="scss" scoped>
.joint-spection-box {
  width: 100%;
  height: 100%;
  padding: 0.24rem;
  position: relative;
  .threed-map-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.24rem;
    .threed-map-legend {
      width: 1.4rem;
      height: 1rem;
      position: absolute;
      right: 25%;
      bottom: 0.24rem;
      z-index: 3;
      .item {
        height: 0.2rem;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        span:first-child {
          display: inline-block;
          height: 0.2rem;
          width: 0.2rem;
          background: url("../../../../assets/img/JointInspection/wxj.png")
            no-repeat center center;
          background-size: 100% 100%;
        }
        span:last-child {
          font-size: 0.18rem;
          margin-left: 0.12rem;
        }
      }
      .item:nth-child(2) {
        span:first-child {
          background: url("../../../../assets/img/JointInspection/xjz.png")
            no-repeat center center;
          background-size: 100% 100%;
        }
      }
      .item:nth-child(3) {
        span:first-child {
          background: url("../../../../assets/img/JointInspection/xjwc.png")
            no-repeat center center;
          background-size: 100% 100%;
        }
      }
      .item:nth-child(4) {
        span:first-child {
          background: url("../../../../assets/img/JointInspection/xjsb.png")
            no-repeat center center;
          background-size: 100% 100%;
        }
      }
    }
    .threed-map-box-map {
      width: 100%;
      height: 100%;
    }
  }
  .bdzfgqk-btn {
    width: 0.44rem;
    height: 0.44rem;
    position: absolute;
    left: 0.24rem;
    top: 0;
    z-index: 1;
  }
  .bdzfgqk-box {
    width: 4.7rem;
    height: 2.5rem;
    position: absolute;
    left: 0.24rem;
    top: 0.44rem;
    z-index: 1;
  }

  .yctjwclbg-box {
    width: 4.7rem;
    height: 2.22rem;
    position: absolute;
    left: 0.24rem;
    bottom: 0.44rem;
    z-index: 1;
  }
  .yctjwclbg-btn {
    width: 0.44rem;
    height: 0.44rem;
    position: absolute;
    left: 0.24rem;
    bottom: 0;
    z-index: 1;
  }
  .bdz-xjjh-xjbg {
    width: 4.38rem;
    height: calc(100% - 0.48rem);
    position: absolute;
    right: 0.24rem;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    > div {
      width: 100%;
      height: 31.93%;
    }
  }
}
</style>
<style lang="scss">
.bdzfgqk-btn,
.yctjwclbg-btn {
  .el-button {
    border: 1px solid #00e7ff;
  }
  .el-button:focus, .el-button:hover,.el-button:active {
    color: #00e7ff;
  }
}
</style>

